<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="__PUBLIC__/wechat/css/global.css" />
	<link rel="stylesheet" href="__PUBLIC__/wechat/css/main.css" />
	<title>油卡兑换</title>
</head>
<body class="bg_f5f5f5">
	<div class="all_top">
		<div class="all_top_main">
			<a href="javascript:history.go(-1);" class="all_top_back"></a>
			<p class="all_top_tit t_c">话费兑换</p>
		</div>
	</div>
	<div class="exchange_phone">
        <form  method="post" id="forms">
        	<div class="exphone_number">
	        	<input type="text" placeholder="输入手机号码" class="exphone_number_input" name="_phone" />
	        </div>
	        <div class="exphone_main">
	        	<p class="exphone_main_money">可兑换：200车币</p>
	        	<div class="clearfix">
	        		<div class="exphone_div">
	        			<label class="exphone_label on" for="radio1">100元</label>
	        			<input type="radio" name="money" id="radio1" class="hide"/>
	        		</div>
	        		<div class="exphone_div">
	        			<label class="exphone_label" for="radio2">100元</label>
	        			<input type="radio" name="money" id="radio2" class="hide"/>
	        		</div>
	        		<div class="exphone_div">
	        			<label class="exphone_label" for="radio3">100元</label>
	        			<input type="radio" name="money" id="radio3" class="hide"/>
	        		</div>
	        		<div class="exphone_div">
	        			<label class="exphone_label" for="radio4">100元</label>
	        			<input type="radio" name="money" id="radio4" class="hide"/>
	        		</div>
	        	</div>
	        	<a href="javascript:void(0);" class="big_btn2 exphone_btn">立即兑换</a>
	        </div>
	        <ul class="history_ul">
	        	<li class="history_li">
	        		340122211188111111
	        	</li>
	        	<li class="history_li">
	        		340122211188111111
	        	</li>
	        	<li class="history_li">
	        		340122211188111111
	        	</li>
	        	<li class="history_clear">
	        		清空历史记录
	        	</li>
	        </ul>
        </form>
	</div>
	<section class="pop_content">
		<div class="pop_table">
			<div class="pop_body">
				<div class="pop_main">
					<p class="pop_content_tit">请输入安全密码</p>
					<input type="text" class="pop_content_input" placeholder="请输入安全密码"/>
					<div class="box">
						<div class="box_flex1 pop_content_btn pop_btn_cancel">
							取消
						</div>
						<div class="box_flex1 pop_content_btn pop_btn_sure">
							确定
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>	
</body>
</html>
<script type="text/javascript" src="__PUBLIC__/wechat/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/wechat/js/public.js"></script>
<script type="text/javascript" src="__PUBLIC__/wechat/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/wechat/js/jquery-validate-methods.js"></script>
<script type="text/javascript">
    // 选择充值金额
	$(".exphone_label").on("click", function(){
        $(".exphone_label").removeClass("on");
        $(this).addClass("on");
	});

	$(".exphone_btn").on("click", function(){
        $(".pop_content").show();
        $(".pop_btn_cancel").on("click", function(){
        	$(".pop_content").hide();
        });
        // 点击确定时 提交表单
        $(".pop_btn_sure").on("click", function(){
        	$(".pop_content").hide();
        	$("#forms").submit();
        });
	});

	// 对充值历史记录进行操作
	$(".exphone_number_input").on({
		focus: function() {
			$(".exphone_main").hide();
			$(".history_ul").show();
		},
		keyup: function() {
			$(".exphone_main").show();
			$(".history_ul").hide();
		}
	});
	$(".history_li").on("click", function() {
		var nums = $(this).text().trim();
		$(".exphone_number_input").val(nums);
		$(".exphone_main").show();
		$(".history_ul").hide();
	});
	$(".history_clear").on("click", function(){
		$(".exphone_main").show();
		$(".history_ul").remove();
		$.ajax({
			//这里通过ajax去清除充值记录
		});
	});
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#forms').validate({//表单验证
            rules: {
                _name: {
                	required: true
                },
                _phone: {
                	required: true
                },
                _address: {
                	required: true
                }
            },
            messages: {
                _name: {
                	required:'请填写姓名'
                },
                _phone: {
                	required:'请填写联系电话'
                },
                _address: {
                	required:'请填写联系地址'
                }
            },  
            showErrors: function(errorMap, errorList) { 
                $.each( errorList, function(i,v){
                    if(v.message!=""){
                        openWarningBox(v.message);
                        return false;
                    }
                });  
            },
            /* 失去焦点时不验证 */
            onfocusout: false
        });
    });
</script>